<template>
	<view style="padding-bottom: 130rpx;">
		<!-- 租金明细 -->
		<uni-section title="租金费用明细" type="line" v-if="type == 1">
			<view class="formInfo">
				<view v-for="(item,index) in rentDetail" :key="index">
					<block v-if="item.type == 1">
						<view class="payItem">{{item.chargeProjectName}}</view>
						<view>
							<uni-table ref="table" :loading="loading" border stripe>
								<uni-tr>
									<uni-th width="100" align="center"><text style="color: #2879FF;">单价</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">数目</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">费用</text>
									</uni-th>
								</uni-tr>
								<uni-tr>
									<uni-td
										align="center">{{item.unitPrice}}{{item.chargeItemsType|chargeItemsType}}</uni-td>
									<uni-td align="center">{{item.number}}</uni-td>
									<uni-td align="center">{{item.chargeMoney}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</block>
					<block v-else>
						<view class="payItem flex-row-center-sb">
							<text>{{item.name}}</text>
							<text>¥{{item.chargeMoney}}</text>
						</view>
					</block>
				</view>
			</view>
		</uni-section>

		<!-- 车辆押金明细 -->
		<uni-section title="车辆押金明细" type="line" v-else-if="type == 2">
			<view class="formInfo">
				<view class="payItem flex-row-center-sb">
					<text>应收合计</text>
					<text>¥{{depositDetail.cost}}</text>
				</view>
				<view class="payItem flex-row-center-sb">
					<text>已付</text>
					<text>¥{{depositDetail.paidAmount}}</text>
				</view>
				<view class="payItem flex-row-center-sb">
					<text>待付</text>
					<text>¥{{depositDetail.unpaidAmount}}</text>
				</view>
			</view>
		</uni-section>

		<!-- 违章押金明细 -->
		<uni-section title="违章押金明细" type="line" v-else-if="type == 3">
			<view class="formInfo">
				<view class="payItem flex-row-center-sb">
					<text>应收合计</text>
					<text>¥{{illegalDepositDetail.cost}}</text>
				</view>
				<view class="payItem flex-row-center-sb">
					<text>已付</text>
					<text>¥{{illegalDepositDetail.paidAmount}}</text>
				</view>
				<view class="payItem flex-row-center-sb">
					<text>待付</text>
					<text>¥{{illegalDepositDetail.unpaidAmount}}</text>
				</view>
			</view>
		</uni-section>

		<!-- 续租费用明细 -->
		<uni-section title="续租费用明细" type="line" v-else-if="type == 7">
			<view class="formInfo">
				<view v-for="(item,index) in renewalDetail" :key="index">
					<block v-if="item.name!= '续租记录'">
						<view class="payItem flex-row-center-sb">
							<text>{{item.name}}</text>
							<text>¥{{item.renewCost}}</text>
						</view>
					</block>
				</view>
			</view>
		</uni-section>

		<!-- 车损费用明细 -->
		<uni-section title="车损费用明细" type="line" v-else-if="type == 15">
			<view class="formInfo">
				<view v-for="(item,index) in returnRecord" :key="index">
					<block>
						<view class="payItem flex-row-center-sb">
							<text>{{item.name}}</text>
							<text>¥{{item.renewCost}}</text>
						</view>
					</block>
				</view>
			</view>
		</uni-section>

		<!-- 违章费用明细 -->
		<uni-section title="违章费用明细" type="line" v-else-if="type == 16">
			<view class="formInfo">
				<view v-for="(item,index) in violationRecord" :key="index">
					<block>
						<view class="payItem flex-row-center-sb">
							<text>{{item.name}}</text>
							<text>¥{{item.renewCost}}</text>
						</view>
					</block>
				</view>
			</view>
		</uni-section>



		<uni-section title="提交付款信息" type="line">
			<view class="formInfo">
				<uni-forms ref="form">
					<uni-forms-item label="收款方式" required>
						<view @click="showPayWay=true">
							<u--input v-model="formData.payWayStr" disabled disabledColor="#fff" placeholder="请选择收款方式"
								suffixIcon="arrow-right">
							</u--input>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收款账户">
						<u--input v-model="formData.payerAccount" placeholder="请输入收款账户" type="number"></u--input>
					</uni-forms-item>

					<uni-forms-item label="收款金额" required>
						<u--input v-model="formData.paidAmount" @input="check" type="digit"
							placeholder="请输入收款金额"></u--input>
					</uni-forms-item>

					<uni-forms-item label="收款时间" required>
						<uni-datetime-picker type="datetime" v-model="formData.paidTime" @change="changeTime()" />
					</uni-forms-item>

					<uni-forms-item label="经办人" required>
						<u--input v-model="formData.operator" placeholder="自动带出可修改"></u--input>
					</uni-forms-item>

					<uni-forms-item label="备注">
						<u--textarea v-model="formData.remark" count placeholder="请输入200字内的说明" maxlength="200">
						</u--textarea>
					</uni-forms-item>

					<uni-forms-item label="支付凭证">
						<sr-upload maxCount="1" @uploadResult="payDocument"></sr-upload>
					</uni-forms-item>

				</uni-forms>
			</view>
		</uni-section>

		<!-- 付款方式 -->
		<u-picker :show="showPayWay" :columns="sysPayWay" keyName="name" closeOnClickOverlay @close="showPayWay = false"
			@cancel="showPayWay = false" title="付款方式" confirmColor="#1573FF" @confirm="confimPayWay"></u-picker>

		<button type="info" class="sub-btn" @click="confimCollection">确认收款</button>
	</view>

</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import * as orderApi from '@/api/order-api.js';
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload,
		},
		data() {
			return {
				showPayWay: false,
				sysPayWay: [this.$store.state.initData.initData.sysPayWay],
				type: -1,
				orderNo: '',
				rentDetail: [],
				depositDetail: {},
				illegalDepositDetail: {},
				renewalDetail: [],
				returnRecord: [],
				violationRecord: [],
				formData: {
					operator: this.$store.state.user.userInfo.name, //	经办人
					paidAmount: '', //收款金额
					paidTime: this.parseTime(new Date()), //收款时间
					payWay: '1', //	收款方式
					payWayStr: '微信', //收款方式str
					payerAccount: '', //收款账号
					remark: '', //备注
					url: ''
				},
				key: '',
			};
		},
		onLoad(op) {
			this.type = Number(op.type);
			this.orderNo = op.orderNo;
			this.getPayFeeInfo();
		},
		methods: {
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.formData.paidAmount = e;
				})
			},
			// 获取费用明细
			getPayFeeInfo() {
				switch (this.type) {
					case 1: //租金
						this.key = 'rentItemsVo';
						orderApi.rentDetail(this.orderNo).then(res => {
							this.rentDetail = res.data;
						})
						break;
					case 2: //车辆押金支付
						this.key = 'depositItemsVo';
						orderApi.depositDetail(this.orderNo).then(res => {
							this.depositDetail = res.data;
						})
						break;
					case 3: //违章押金支付
						this.key = 'illegalItemsVo';
						orderApi.illegalDepositDetail(this.orderNo).then(res => {
							this.illegalDepositDetail = res.data;
						})
						break;
					case 7: //续租费用
						this.key = 'renewalItemsVo';
						orderApi.renewalDetail(this.orderNo).then(res => {
							this.renewalDetail = res.data;
						})
						break;
					case 15: //车损费用
						this.key = 'vehicleReturnFee';
						orderApi.returnRecord(this.orderNo).then(res => {
							this.returnRecord = res.data;
						})
						break;
					case 16: //违章费用
						this.key = 'violationExpenses';
						orderApi.violationRecord(this.orderNo).then(res => {
							this.violationRecord = res.data;
						})
						break;
					default:
						break;
				}
			},

			// 收款时间
			changeTime(e) {
				this.formData.time = e;
			},
			// 收款方式
			confimPayWay(e) {
				this.formData.payWay = e.value[0].id;
				this.formData.payWayStr = e.value[0].name;
				this.showPayWay = !this.showPayWay;
			},
			// 支付凭证
			payDocument(data) {
				this.formData.url = data[0];
			},
			// 确认收款
			confimCollection() {
				if (uni.$u.test.isEmpty(this.formData.payWay)) {
					uni.$u.toast('请选择收款方式');
					return
				} else if (uni.$u.test.isEmpty(this.formData.paidAmount)) {
					uni.$u.toast('请输入收款金额');
					return
				} else if (uni.$u.test.isEmpty(this.formData.paidTime)) {
					uni.$u.toast('请选择付款时间');
					return
				} else if (uni.$u.test.isEmpty(this.formData.operator)) {
					uni.$u.toast('请输入经办人');
					return
				} else {
					orderApi.paymentOfFees({
						orderNo: this.orderNo,
						[this.key]: [this.formData]
					}).then(res => {
						uni.$emit("refreshOrder");
						this.$u.toast('收款成功')
						uni.navigateBack({
							animationDuration: 300
						})
					})
				}



			},

			// 日期格式化
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
				let date;
				if (typeof time === 'object') {
					date = time;
				} else {
					if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === 'string') {
						time = time
							.replace(new RegExp(/-/gm), '/')
							.replace('T', ' ')
							.replace(new RegExp(/\.[\d]{3}/gm), '');
					}
					if (typeof time === 'number' && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === 'a') {
						return ['日', '一', '二', '三', '四', '五', '六'][value];
					}
					if (result.length > 0 && value < 10) {
						value = '0' + value;
					}
					return value || 0;
				});
				return time_str;
			}

		}

	};
</script>

<style scpod="scpod" lang="scss">
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.payItem {
		padding: 12rpx 0;
		color: #666;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>